<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星空题目挑战</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'space': {
                            'dark': '#050A30',
                            'medium': '#1A1A40',
                            'light': '#270082'
                        },
                        'birthday': {
                            'light': '#FFE6EB',
                            'medium': '#FFB6C1',
                            'dark': '#FF69B4'
                        },
                        primary: '#3B82F6',
                        secondary: '#10B981',
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                             0 0 20px rgba(255, 255, 255, 0.5);
            }
            .star {
                position: absolute;
                background-color: white;
                border-radius: 50%;
                animation: twinkle 2s infinite alternate;
            }
            .answer-input {
                width: 40px;
                border: none;
                border-bottom: 2px solid white;
                background: transparent;
                color: white;
                text-align: center;
                font-size: 1.2rem;
                margin: 0 5px;
                padding: 5px;
            }
            .answer-input-medium {
                width: 60px;
                border: none;
                border-bottom: 2px solid white;
                background: transparent;
                color: white;
                text-align: center;
                font-size: 1.2rem;
                margin: 0 5px;
                padding: 5px;
            }
            .answer-input-long {
                width: 80px;
                border: none;
                border-bottom: 2px solid white;
                background: transparent;
                color: white;
                text-align: center;
                font-size: 1.2rem;
                margin: 0 5px;
                padding: 5px;
            }
            .answer-input:focus, .answer-input-medium:focus, .answer-input-long:focus {
                outline: none;
                border-bottom: 2px solid #9333ea;
            }
            .correct {
                border-bottom: 2px solid #10b981 !important;
            }
            .incorrect {
                border-bottom: 2px solid #ef4444 !important;
                animation: shake 0.5s;
            }
            .option-list {
                text-align: left;
                margin: 1rem auto;
                max-width: 500px;
                line-height: 1.8;
            }
            .combined-result {
                margin: 2rem auto;
                max-width: 90%;
                padding: 1.5rem; /* 减少内边距 */
                background-color: rgba(26, 26, 64, 0.6);
                border-radius: 10px;
                border: 1px solid rgba(147, 51, 234, 0.3);
                font-size: clamp(1.2rem, 5vw, 1.8rem); /* 优化字体大小，使用clamp */
                letter-spacing: 0.1rem; /* 减少字间距 */
                text-align: center;
                font-family: monospace;
                animation: pulse 3s infinite alternate, fadeIn 1s;
                white-space: nowrap;
                overflow-x: auto; /* 确保在小屏幕上可以横向滚动 */
                -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
                transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .highlight {
                color: #c084fc;
                text-shadow: 0 0 10px rgba(192, 132, 252, 0.8);
                font-weight: bold;
            }
            .char-transition {
                display: inline-block;
                transition: all 0.5s ease;
                transform-origin: center;
            }
            .char-fade-out {
                opacity: 0;
                transform: scale(0.5) rotate(10deg);
            }
            .char-fade-in {
                opacity: 0;
                transform: scale(1.5) rotate(-10deg);
                animation: charFadeIn 0.5s forwards 0.3s;
            }
            
            /* 简约的生日主题装饰 */
            .confetti {
                position: absolute;
                width: 8px;
                height: 8px;
                opacity: 0;
            }
            .balloon {
                position: absolute;
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
                animation: floatUp 10s infinite ease-in-out;
            }
            .balloon::after {
                content: "";
                position: absolute;
                width: 1px;
                height: 20px;
                background-color: rgba(0,0,0,0.2);
                bottom: -20px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            /* 彩带特效样式 - 修改为覆盖画布的层 */
            .ribbon-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                overflow: visible;
                z-index: 55;
            }
            
            .ribbon {
                position: absolute;
                width: 8px;
                height: 30px;
                opacity: 0;
            }
            
            /* 动态圆点效果所需的元素 */
            #dotCanvasContainer {
                position: relative;
                width: 100%;
                height: 100%;
            }
            
            /* 信件按钮样式 - 初始隐藏 */
            #letterButton {
                margin-top: 2rem;
                padding: 1rem 2rem;
                background-color: #8B4513;
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 1.2rem;
                cursor: pointer;
                transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                z-index: 60;
                opacity: 0;
                transform: translateY(20px);
                pointer-events: none;
                /* 确保按钮居中 */
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
            
            /* 按钮显示状态 */
            #letterButton.visible {
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
            }
            
            #letterButton:hover {
                background-color: #A0522D;
                transform: translateY(-3px);
                box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
            }
            
            /* 信件弹窗样式 */
            .letter-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.7);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 100;
                opacity: 0;
                visibility: hidden;
                transition: all 0.5s ease;
            }
            
            .letter-modal.active {
                opacity: 1;
                visibility: visible;
            }
            
            .letter-content {
                position: relative;
                width: 90%;
                max-width: 600px;
                max-height: 80vh;
                background-color: #FFF8E7;
                border-radius: 5px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                overflow: hidden;
                transform: scale(0.8) rotate(-5deg);
                transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            
            .letter-modal.active .letter-content {
                transform: scale(1) rotate(0);
            }
            
            .letter-envelope {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #C41E3A;
                z-index: 20;
                transition: all 0.8s ease;
                transform-origin: bottom center;
            }
            
            .letter-modal.active .letter-envelope {
                transform: rotateX(180deg);
                opacity: 0;
            }
            
            .letter-paper {
                padding: 2rem;
                overflow-y: auto; /* 允许内容上下滚动 */
                height: 100%;
                position: relative;
                z-index: 10;
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d1c8b0' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
            
            .letter-close {
                position: absolute;
                top: 1rem;
                right: 1rem;
                background-color: #C41E3A;
                color: white;
                border: none;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                z-index: 30;
                transition: all 0.3s ease;
            }
            
            .letter-close:hover {
                background-color: #9e162f;
                transform: rotate(90deg);
            }
            
            .letter-header {
                text-align: center;
                margin-bottom: 1.5rem;
                padding-bottom: 1rem;
                border-bottom: 1px solid #d1c8b0;
            }
            
            .letter-body {
                line-height: 1.8;
                font-size: 1.1rem;
                color: #3a2e21;
                padding-bottom: 2rem; /* 增加底部内边距，确保最后一行可见 */
            }
            
            .letter-signature {
                margin-top: 2rem;
                text-align: right;
                font-style: italic;
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        
        @keyframes charFadeIn {
            from { 
                opacity: 0;
                transform: scale(1.5) rotate(-10deg);
            }
            to { 
                opacity: 1;
                transform: scale(1) rotate(0);
            }
        }
        
        @keyframes twinkle {
            from { opacity: 0.3; }
            to { opacity: 1; }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes floatUp {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0.8; }
            100% { transform: translateY(-100px) rotate(30deg); opacity: 0; }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 15px rgba(147, 51, 234, 0.3); }
            100% { transform: scale(1.05); box-shadow: 0 0 25px rgba(147, 51, 234, 0.6); }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(20px);
                display: none;
            }
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes confettiFall {
            0% { transform: translateY(-10%) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
        
        /* 圆点出现动画 */
        @keyframes dotAppear {
            0% { transform: scale(0); opacity: 0; }
            70% { transform: scale(1.2); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        /* 彩带动画 - 多个方向 */
        @keyframes ribbonShootUpRight {
            0% { transform: translate(0, 0) rotate(45deg); opacity: 1; }
            100% { transform: translate(150px, -150px) rotate(70deg); opacity: 0; }
        }
        
        @keyframes ribbonShootUpLeft {
            0% { transform: translate(0, 0) rotate(-45deg); opacity: 1; }
            100% { transform: translate(-150px, -150px) rotate(-70deg); opacity: 0; }
        }
        
        @keyframes ribbonShootDownRight {
            0% { transform: translate(0, 0) rotate(-45deg); opacity: 1; }
            100% { transform: translate(150px, 150px) rotate(-70deg); opacity: 0; }
        }
        
        @keyframes ribbonShootDownLeft {
            0% { transform: translate(0, 0) rotate(45deg); opacity: 1; }
            100% { transform: translate(-150px, 150px) rotate(70deg); opacity: 0; }
        }
        
        @keyframes ribbonShootUp {
            0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
            100% { transform: translate(0, -180px) rotate(20deg); opacity: 0; }
        }
        
        @keyframes ribbonShootDown {
            0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
            100% { transform: translate(0, 180px) rotate(-20deg); opacity: 0; }
        }
        
        @keyframes ribbonShootLeft {
            0% { transform: translate(0, 0) rotate(-90deg); opacity: 1; }
            100% { transform: translate(-180px, 0) rotate(-70deg); opacity: 0; }
        }
        
        @keyframes ribbonShootRight {
            0% { transform: translate(0, 0) rotate(90deg); opacity: 1; }
            100% { transform: translate(180px, 0) rotate(70deg); opacity: 0; }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        .pulse {
            animation: pulse 3s ease-in-out infinite;
        }
        
        .fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }
        
        .fade-out {
            animation: fadeOut 0.6s ease-out forwards;
        }
        
        .btn-hover {
            transition: all 0.3s ease;
        }
        
        .btn-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(147, 51, 234, 0.5);
        }
        
        .content-section {
            transition: all 0.5s ease;
        }
        
        #loadingScreen {
            position: absolute;
            inset: 0;
            z-index: 50;
            background-color: #050A30;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease-out;
        }
        
        .spinner {
            position: relative;
            width: 120px;
            height: 120px;
            animation: spin 3s linear infinite;
        }
        
        .spinner .star {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 3px;
            height: 3px;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 1.5s infinite alternate;
        }
        
        #finalizeBtn {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease-out;
            pointer-events: none;
        }
        
        #finalizeBtn.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        
        /* 结果容器样式 */
        #resultContent {
            transition: all 0.8s ease-out;
        }
        
        /* 最终祝福信息样式 - 优化手机端字体 */
        #finalBirthdayMessage {
            position: fixed;
            top: 5%;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 20px;
            z-index: 50;
            opacity: 0;
            transition: opacity 1s ease-out;
            animation: float 6s ease-in-out infinite;
            font-size: clamp(1.8rem, 7vw, 3.5rem); /* 优化字体大小，使用clamp */
            line-height: 1.2; /* 调整行高，避免文字重叠 */
            white-space: nowrap;
            overflow-x: auto; /* 允许横向滚动 */
            -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
        }
        
        /* 生日祝福图片样式 - 针对手机端优化 */
        #birthdayImageContainer {
            position: fixed;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;  /* 增加宽度百分比 */
            max-width: 90vw;  /* 手机端使用更宽的屏幕占比 */
            max-height: 60vh;  /* 增加高度占比 */
            z-index: 50;
            opacity: 0;
            transition: opacity 1s ease-out 0.5s;
        }
        
        /* 圆点画布容器 - 确保填充可用空间 */
        #dotCanvasContainer {
            width: 100%;
            height: 100%;
        }
        
        /* 圆点画布 - 针对手机端优化 */
        #dotCanvas {
            width: 100% !important;
            height: auto !important;
            max-height: 60vh;  /* 增加手机端画布高度 */
        }
        
        /* 生日主题背景 */
        .birthday-bg {
            background: linear-gradient(135deg, #FFE6EB 0%, #FFB6C1 100%);
            transition: background 1s ease-out;
        }
        
        /* 音频控制样式 - 调整位置使其更容易点击 */
        .audio-controls {
            position: fixed;
            bottom: 40px; /* 增加底部距离 */
            right: 20px;
            z-index: 100;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 10px;
            opacity: 0.7;
            transition: opacity 0.3s ease, transform 0.5s ease;
            transform: translateY(100px);
            pointer-events: none;
        }
        
        .audio-controls.visible {
            transform: translateY(0);
            pointer-events: auto;
        }
        
        .audio-controls:hover {
            opacity: 1;
        }
        
        .audio-button {
            width: 50px;  /* 增大按钮尺寸 */
            height: 50px; /* 增大按钮尺寸 */
            background-color: #FF69B4;
            border: none;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            font-size: 1.2rem; /* 增大图标 */
        }
        
        /* 第二题图片容器的特殊样式 */
        .question2-image-container {
            overflow-x: auto;
            padding: 1rem;
            max-width: 90vw;
        }
        
        .question2-image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        
        @media (min-width: 768px) {
            .question2-image {
                max-height: 50vh;
                object-fit: contain;
            }
            
            /* 桌面端保持适当的画布大小 */
            #birthdayImageContainer {
                max-width: 70%;
                max-height: 50vh;
            }
            
            #dotCanvas {
                max-height: 50vh;
            }
            
            /* 桌面端音频按钮位置 */
            .audio-controls {
                bottom: 30px;
                right: 30px;
            }
            
            .audio-button {
                width: 45px;
                height: 45px;
            }
        }
        
        /* 手机端特殊优化 */
        @media (max-width: 767px) {
            /* 增加手机端的装饰元素数量 */
            .confetti {
                width: 6px;
                height: 6px;
            }
            
            /* 调整手机端的圆点画布大小 */
            #birthdayImageContainer {
                top: 50%;  /* 稍微上移 */
                width: 95%;  /* 更接近屏幕边缘 */
                max-height: 65vh;  /* 增加高度占比 */
            }
            
            #dotCanvas {
                max-height: 65vh;  /* 增加高度 */
            }
            
            /* 增加手机端的圆点密度 */
            .mobile-dot-dense {
                --dot-step: 8px !important;
            }
            
            /* 增加手机端的彩带数量 */
            .mobile-ribbon-more .ribbon {
                animation-duration: 2s !important;
            }
            
            /* 手机端最后一页标题文字 */
            #finalBirthdayMessage {
                font-size: clamp(1.8rem, 9vw, 3.5rem); /* 优化字体大小 */
                top: 3%; /* 稍微上移，留出更多空间 */
                padding-left: 10px;
                padding-right: 10px;
            }
            
            /* 手机端音频按钮优化 */
            .audio-controls {
                bottom: 50px; /* 进一步提高位置，确保在屏幕内可见 */
                right: 15px;
            }
            
            .audio-button {
                width: 55px;  /* 更大的按钮尺寸 */
                height: 55px;
            }
        }
    </style>
</head>
<body class="overflow-hidden h-screen bg-space-dark transition-all duration-1000">
    <!-- 装饰元素容器 -->
    <div id="decorations" class="absolute inset-0 z-0 pointer-events-none"></div>
    
    <!-- 加载动画层 -->
    <div id="loadingScreen">
        <div class="spinner">
            <div class="star" style="transform: translate(-120%, -120%); animation-delay: 0.2s;"></div>
            <div class="star" style="transform: translate(120%, -120%); animation-delay: 0.4s;"></div>
            <div class="star" style="transform: translate(-120%, 120%); animation-delay: 0.6s;"></div>
            <div class="star" style="transform: translate(120%, 120%); animation-delay: 0.8s;"></div>
            <div class="star" style="transform: translate(0%, -180%); animation-delay: 1s;"></div>
        </div>
    </div>
    
    <!-- 星空背景容器 -->
    <div id="stars" class="absolute inset-0 z-0"></div>
    
    <!-- 银河效果 -->
    <div class="absolute inset-0 z-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-space-light/20 via-space-medium/10 to-transparent"></div>
    
    <!-- 背景音乐元素 -->
    <audio id="birthdayMusic" loop>
        <source src="https://raw.githubusercontent.com/hirutonbi113/acelpage/refs/heads/main/birthday.mp3" type="audio/mpeg">
    </audio>
     
    <!-- 音频控制按钮 - 默认隐藏 -->
    <div class="audio-controls" id="audioControls">
        <button id="audioControl" class="audio-button">
            <i class="fa fa-music"></i>
        </button>
    </div>
    
    <!-- 1. 初始页 -->
    <div id="initialContent" class="content-section relative z-10 h-full flex flex-col items-center justify-center px-4 text-center">
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-white mb-8 text-shadow floating">
            嘘......
        </h1>
        <p id="timeText" class="text-[clamp(1rem,2vw,1.5rem)] text-gray-200 max-w-2xl mb-12 leading-relaxed pulse">
            现在是[当前日期时间]，给你准备了一个小小的礼物✨
        </p>
        <button id="nextPageBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg btn-hover flex items-center gap-2">
            打开礼物 <i class="fa fa-gift"></i>
        </button>
    </div>
    
    <!-- 新添加的说明页 -->
    <div id="introPage" class="content-section relative z-10 h-full flex flex-col items-center justify-center px-4 text-center opacity-0 hidden">
        <div class="max-w-2xl mx-auto fade-in-up">
            <p class="text-gray-200 text-xl md:text-2xl leading-relaxed mb-12 text-shadow">
                当然，礼物不是白拿的，先来做六道题吧！
            </p>
            
            <button id="startQuizBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg btn-hover flex items-center gap-2 mx-auto">
                开始答题 <i class="fa fa-arrow-right"></i>
            </button>
        </div>
    </div>
    
    <!-- 2. 第一题：电学题 -->
    <div id="question1" class="content-section relative z-10 h-full flex flex-col items-center justify-center px-4 text-center opacity-0 hidden">
        <div class="mb-6 fade-in-up" style="animation-delay: 0.1s;">
            <h3 class="text-xl md:text-2xl font-semibold text-white text-shadow">第一题</h3>
        </div>
        
        <div class="fade-in-up max-w-2xl" style="animation-delay: 0.4s;">
            <p class="text-gray-200 text-lg md:text-xl leading-relaxed mb-8">
                在闭合电路中，电源的内电压等于电路中的电流 \( I \) 与电源内阻 \( r \) 的乘积，其表达式为内电压 \( U_1 = \) 
                <input type="text" id="ans1" class="answer-input" maxlength="2" placeholder="_">
            </p>
            
            <button id="sub1" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg btn-hover flex items-center gap-2 mx-auto">
                提交答案 <i class="fa fa-check"></i>
            </button>
        </div>
    </div>
    
    <!-- 3. 第二题：温度图题 -->
    <div id="question2" class="content-section relative z-10 h-full flex flex-col items-center justify-center px-4 text-center opacity-0 hidden">
        <div class="mb-6 fade-in-up" style="animation-delay: 0.1s;">
            <h3 class="text-xl md:text-2xl font-semibold text-white text-shadow">第二题</h3>
        </div>
        
        <!-- 修改图片容器，添加特殊样式解决横屏显示问题 -->
        <div class="question2-image-container mb-8 fade-in-up" style="animation-delay: 0.2s;">
            <img src="https://raw.githubusercontent.com/hirutonbi113/acelpage/refs/heads/main/chemistry.png" alt="化学反应装置示意图，标记有A点和H点的位置" class="question2-image rounded-lg shadow-lg border-2 border-purple-500/50">
        </div>
        
        <div class="fade-in-up max-w-2xl" style="animation-delay: 0.4s;">
            <p class="text-gray-200 text-lg md:text-xl leading-relaxed mb-8">
                如图，已知点A的温度表示为\( T_A \)，则图中点H的表示为 
                <input type="text" id="ans2" class="answer-input" maxlength="2" placeholder="_">
            </p>
            
            <button id="sub2" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg btn-hover flex items-center gap-2 mx-auto">
                提交答案 <i class="fa fa-check"></i>
            </button>
        </div>
    </div>
    
    <!-- 4. 第三题：英语题 -->
    <div id="question3" class="content-section relative z-10 h-full flex flex flex-col items-center justify-center px-4 text-center opacity-0 hidden">
        <div class="mb-6 fade-in-up" style="animation-delay: 0.1s;">
            <h3 class="text-xl md:text-2xl font-semibold text-white text-shadow">第三题</h3>
        </div>
        
        <div class="fade-in-up max-w-2xl" style="animation-delay: 0.4s;">
            <p class="text-gray-200 text-lg md:text-xl leading-relaxed mb-8">
                She looked <input type="text" id="ans3" class="answer-input-long" maxlength="5" placeholder="_"> (happiness) after hearing the good news.
            </p>
            
            <button id="sub3" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg btn-hover flex items-center gap-2 mx-auto">
                提交答案 <i class="fa fa-check"></i>
            </button>
        </div>
    </div>
    
    <!-- 5. 第四题：椭圆定义题 -->
    <div id="question4" class="content-section relative z-10 h-full flex flex-col items-center justify-center px-4 text-center opacity-0 hidden">
        <div class="mb-6 fade-in-up" style="animation-delay: 0.1s;">
            <h3 class="text-xl md:text-2xl font-semibold text-white text-shadow">第四题</h3>
        </div>
        
        <div class="fade-in-up max-w-2xl" style="animation-delay: 0.4s;">
            <p class="text-gray-200 text-lg md:text-xl leading-relaxed mb-4">
                平面内与两个定点 \( F_1、F_2 \) 的距离之和为常数的点的轨迹是椭圆，这个常数需要满足的条件是（ ）
            </p>
            
            <div class="option-list text-gray-200 text-lg mb-8">
                <p>A. 等于 \( |F_1F_2| \)</p>
                <p>B. 大于 \( |F_1F_2| \)</p>
                <p>C. 小于 \( |F_1F_2| \)</p>
                <p>D. 与 \( |F_1F_2| \) 无关</p>
            </div>
            
            <p class="text-gray-200 text-lg md:text-xl leading-relaxed mb-8">
                请填入正确选项的字母：
                <input type="text" id="ans4" class="answer-input" maxlength="1" placeholder="_">
            </p>
            
            <button id="sub4" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg btn-hover flex items-center gap-2 mx-auto">
                提交答案 <i class="fa fa-check"></i>
            </button>
        </div>
    </div>
    
    <!-- 6. 第五题：英语填空题 -->
    <div id="question5" class="content-section relative z-10 h-full flex flex-col items-center justify-center px-4 text-center opacity-0 hidden">
        <div class="mb-6 fade-in-up" style="animation-delay: 0.1s;">
            <h3 class="text-xl md:text-2xl font-semibold text-white text-shadow">第五题</h3>
        </div>
        
        <div class="fade-in-up max-w-2xl" style="animation-delay: 0.4s;">
            <p class="text-gray-200 text-lg md:text-xl leading-relaxed mb-8">
                What makes this ____ (daily) different from her daily routine is that she decides to take a walk after dinner.
            </p>
            
            <p class="text-gray-200 text-lg md:text-xl leading-relaxed mb-8">
                请填入正确答案：
                <input type="text" id="ans5" class="answer-input-long" maxlength="3" placeholder="_">
            </p>
            
            <button id="sub5" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg btn-hover flex items-center gap-2 mx-auto">
                提交答案 <i class="fa fa-check"></i>
            </button>
        </div>
    </div>
    
    <!-- 7. 第六题：大语言模型缩写题 -->
    <div id="question6" class="content-section relative z-10 h-full flex flex-col items-center justify-center px-4 text-center opacity-0 hidden">
        <div class="mb-6 fade-in-up" style="animation-delay: 0.1s;">
            <h3 class="text-xl md:text-2xl font-semibold text-white text-shadow">第六题</h3>
        </div>
        
        <div class="fade-in-up max-w-2xl" style="animation-delay: 0.4s;">
            <p class="text-gray-200 text-lg md:text-xl leading-relaxed mb-8">
                已知现代AI常用大语言模型（Large Language Models）进行训练。请问其英文缩写是
                <input type="text" id="ans6" class="answer-input-medium" maxlength="3" placeholder="_">
            </p>
            
            <button id="sub6" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg btn-hover flex items-center gap-2 mx-auto">
                提交答案 <i class="fa fa-check"></i>
            </button>
        </div>
    </div>
    
    <!-- 8. 最终结果页：显示所有答案 -->
    <div id="result" class="content-section relative z-10 h-full flex flex-col items-center justify-center px-4 text-center opacity-0 hidden">
        <div id="resultContent" class="w-full">
            <div class="mb-6 fade-in-up" style="animation-delay: 0.1s;">
                <h3 class="text-xl md:text-2xl font-semibold text-white text-shadow">你的答题结果</h3>
            </div>
            
            <div class="fade-in-up max-w-2xl mx-auto" style="animation-delay: 0.4s;">
                <h2 class="text-2xl md:text-3xl font-bold text-white mb-6 text-shadow">挑战完成！</h2>
                
                <!-- 合并显示所有答案的框 -->
                <div id="combinedAnswers" class="combined-result text-gray-200 mb-8 mx-auto">
                    <!-- 答案将通过JavaScript动态填充 -->
                </div>
                
                <p id="resultText" class="text-gray-200 text-lg md:text-xl leading-relaxed mt-8 mb-8">
                    太强了👍物竞生化竞生数竞生英竞生信竞生👍
                </p>
                
                <!-- 添加最终页按钮 -->
                <button id="finalizeBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full text-lg btn-hover flex items-center gap-2 mx-auto visible">
                    下一页➡
                </button>
            </div>
        </div>
    </div>

    <!-- 动态圆点效果所需的元素 -->
    <div id="dotAnimationContainer" class="fixed inset-0 z-50 hidden">
        <!-- 彩带覆盖层 - 放在画布上方 -->
        <div class="ribbon-overlay mobile-ribbon-more" id="topLeftRibbonContainer" style="top: 0; left: 0;"></div>
        <div class="ribbon-overlay mobile-ribbon-more" id="topRightRibbonContainer" style="top: 0; right: 0;"></div>
        <div class="ribbon-overlay mobile-ribbon-more" id="bottomLeftRibbonContainer" style="bottom: 0; left: 0;"></div>
        <div class="ribbon-overlay mobile-ribbon-more" id="bottomRightRibbonContainer" style="bottom: 0; right: 0;"></div>
        
        <div id="finalBirthdayMessage" class="font-bold text-white text-shadow"></div>
        
        <div id="birthdayImageContainer">
            <div id="dotCanvasContainer" class="mobile-dot-dense">
                <canvas id="dotCanvas" class="max-w-full max-h-[60vh] object-contain shadow-xl rounded-lg"></canvas>
            </div>
            
            <!-- 新增的信件按钮 -->
            <button id="letterButton" class="mt-4">
                <i class="fa fa-envelope mr-2"></i> 打开信件
            </button>
        </div>
        
        <!-- 信件弹窗 -->
        <div class="letter-modal" id="letterModal">
            <div class="letter-content">
                <div class="letter-envelope"></div>
                <div class="letter-paper">
                    <div class="letter-header">
                        <h2 class="text-2xl font-bold text-amber-800">一封信</h2>
                        <p class="text-amber-700 italic">致大画家李林蔓</p>
                    </div>
                    <div class="letter-body">
                        <!-- 更新为新的信件内容 -->
                        <p>祝大画家李林蔓 18岁生日快乐！</p>
                        <p>恭喜你成功进化为完全民事行为能力人，并且完全解除地球online的所有限制啦。而我还是17岁的未成年小登，以后记得多让着我一点（（（</p>
                        <p>在这个举国同庆的日子里，就祝你生日快乐，心想事成，天天开心吧！</p>
                        <p>还有，明年的高考一定要大捷！金榜题名！</p>
                        <p>及时当勉励，岁月不待人💪💪💪</p>
                    </div>
                    <div class="letter-signature">
                        <p>hyp</p>
                        <p>2025年10月1日</p>
                    </div>
                </div>
                <button class="letter-close" id="letterClose">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // 存储用户答案的变量
        let userAnswers = {
            question1: '',
            question2: '',
            question3: '',
            question4: '',
            question5: '',
            question6: ''
        };
        
        // 正确答案
        const correctAnswers = {
            question1: 'IR',
            question2: 'TH',
            question3: 'happy',
            question4: 'B',
            question5: 'day',
            question6: 'LLM'
        };
        
        // 彩色圆点动画相关变量
        let currentImage = null;
        let currentBackgroundColor = '#ffffff';
        let imageData = null;
        let animationInterval = null;
        let animationActive = false;
        let canvasWidth = 0;
        let canvasHeight = 0;
        let dotsData = []; // 存储所有圆点的信息
        let dotsIndex = 0; // 当前绘制到的圆点索引
        let animationFrameId = null; // 用于requestAnimationFrame
        let ribbonsTriggered = false; // 标记彩带是否已触发
        let letterButtonShown = false; // 新增：标记信件按钮是否已显示
        
        // 圆点参数配置 - 针对手机端优化
        const config = {
            dotSize: 3.2,       // 略微增大的圆点大小
            density: isMobileDevice() ? 9.0 : 7.0,  // 手机端使用更高的密度
            speed: 100,         // 动画速度
            maxDimension: isMobileDevice() ? 380 : 450,  // 手机端使用稍小的最大尺寸以适应屏幕
            gradientIntensity: 0.2 // 颜色渐变强度
        };
        
        // 彩带配置 - 增加数量和尺寸以提高可见性
        const ribbonConfig = {
            count: isMobileDevice() ? 90 : 70,  // 手机端显示更多彩带
            colors: [
                '#FF69B4', '#FFB6C1', '#FFD1DC', '#FFE6F0',  // 粉色系
                '#FFA500', '#FFD700', '#FFFF00',             // 黄色/金色系
                '#9370DB', '#DDA0DD', '#EE82EE'              // 紫色系
            ],
            minLength: 20,      // 增加长度范围
            maxLength: 70,
            minWidth: 4,        // 增加宽度范围
            maxWidth: 12,
            animationDuration: 1.5, // 动画时间范围
            maxAnimationDuration: 3.5,
            interval: 60         // 缩短每批彩带的间隔时间
        };
        
        // 检测是否为移动设备
        function isMobileDevice() {
            return window.innerWidth < 768;
        }
        
        // 生日主题颜色集
        const birthdayColors = [
            {r: 255, g: 105, b: 180},  // 粉色
            {r: 255, g: 182, b: 193},  // 浅粉色
            {r: 255, g: 209, b: 220},  // 淡粉色
            {r: 255, g: 230, b: 240},  // 极浅粉色
            {r: 255, g: 165, b: 0},    // 橙色
            {r: 255, g: 215, b: 0}     // 金色
        ];
        
        // 更新日期和时间显示
        function updateDateTime() {
            const now = new Date();
            const formatNumber = (n) => n.toString().padStart(2, '0');
            
            const year = now.getFullYear();
            const month = formatNumber(now.getMonth() + 1);
            const day = formatNumber(now.getDate());
            const hours = formatNumber(now.getHours());
            const minutes = formatNumber(now.getMinutes());
            const seconds = formatNumber(now.getSeconds());
            
            const dateTimeString = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
            document.getElementById('timeText').textContent = `现在是${dateTimeString}，给你准备了一个小小的礼物✨`;
        }
        
        // 创建星空背景
        function createStars() {
            const starsContainer = document.getElementById('stars');
            const totalStars = window.innerWidth < 768 ? 60 : 180;
            const batchSize = 20;
            let createdCount = 0;
            
            function createStarBatch() {
                const endIndex = Math.min(createdCount + batchSize, totalStars);
                
                for (let i = createdCount; i < endIndex; i++) {
                    const star = document.createElement('div');
                    star.classList.add('star');
                    
                    const x = Math.random() * 100;
                    const y = Math.random() * 100;
                    const size = Math.random() * 2;
                    const opacity = 0.3 + Math.random() * 0.7;
                    const delay = Math.random() * 5;
                    
                    star.style.left = `${x}%`;
                    star.style.top = `${y}%`;
                    star.style.width = `${size}px`;
                    star.style.height = `${size}px`;
                    star.style.opacity = opacity;
                    star.style.animationDelay = `${delay}s`;
                    
                    if (Math.random() > 0.85) {
                        star.style.backgroundColor = '#D4AF37';
                        star.style.boxShadow = '0 0 5px rgba(212, 175, 55, 0.8)';
                    }
                    
                    starsContainer.appendChild(star);
                }
                
                createdCount = endIndex;
                if (createdCount < totalStars) {
                    requestAnimationFrame(createStarBatch);
                }
            }
            
            requestAnimationFrame(createStarBatch);
        }
        
        // 创建简约的生日装饰元素 - 手机端增加数量
        function createBirthdayDecorations() {
            const decorations = document.getElementById('decorations');
            decorations.innerHTML = ''; // 清空现有装饰
            
            // 气球 - 手机端显示更多气球
            const balloonCount = isMobileDevice() ? 10 : 6;
            const balloonColors = ['#FF69B4', '#FFB6C1', '#FFD1DC', '#FFE6F0'];
            for (let i = 0; i < balloonCount; i++) { 
                const balloon = document.createElement('div');
                balloon.classList.add('balloon');
                
                const size = 30 + Math.random() * 30;
                const color = balloonColors[Math.floor(Math.random() * balloonColors.length)];
                const left = Math.random() * 100;
                const delay = Math.random() * 5;
                
                balloon.style.width = `${size}px`;
                balloon.style.height = `${size}px`;
                balloon.style.backgroundColor = color;
                balloon.style.left = `${left}%`;
                balloon.style.animationDelay = `${delay}s`;
                
                decorations.appendChild(balloon);
            }
            
            // 彩屑 - 手机端显示更多彩屑
            const confettiCount = isMobileDevice() ? 80 : 40;
            for (let i = 0; i < confettiCount; i++) { 
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                
                const size = 5 + Math.random() * 6;
                const color = balloonColors[Math.floor(Math.random() * balloonColors.length)];
                const left = Math.random() * 100;
                const rotation = Math.random() * 360;
                const delay = Math.random() * 3;
                const duration = 4 + Math.random() * 5;
                
                confetti.style.width = `${size}px`;
                confetti.style.height = `${size}px`;
                confetti.style.backgroundColor = color;
                confetti.style.left = `${left}%`;
                confetti.style.transform = `rotate(${rotation}deg)`;
                confetti.style.animation = `confettiFall ${duration}s linear ${delay}s infinite`;
                
                decorations.appendChild(confetti);
            }
        }
        
        // 创建彩带函数 - 改进为多方向、更分散的效果
        function createRibbons() {
            if (ribbonsTriggered) return;
            ribbonsTriggered = true;
            
            // 获取画布位置和尺寸
            const canvas = document.getElementById('dotCanvas');
            const rect = canvas.getBoundingClientRect();
            
            // 定义所有发射点和对应的动画 - 移除了中间的彩带发射点
            const 发射点 = [
                {
                    containerId: 'topLeftRibbonContainer',
                    position: { top: rect.top, left: rect.left },
                    animations: [
                        'ribbonShootUpRight',
                        'ribbonShootUp',
                        'ribbonShootRight'
                    ]
                },
                {
                    containerId: 'topRightRibbonContainer',
                    position: { top: rect.top, left: rect.right },
                    animations: [
                        'ribbonShootUpLeft',
                        'ribbonShootUp',
                        'ribbonShootLeft'
                    ]
                },
                {
                    containerId: 'bottomLeftRibbonContainer',
                    position: { top: rect.bottom, left: rect.left },
                    animations: [
                        'ribbonShootDownRight',
                        'ribbonShootDown',
                        'ribbonShootRight'
                    ]
                },
                {
                    containerId: 'bottomRightRibbonContainer',
                    position: { top: rect.bottom, left: rect.right },
                    animations: [
                        'ribbonShootDownLeft',
                        'ribbonShootDown',
                        'ribbonShootLeft'
                    ]
                }
            ];
            
            // 为每个发射点设置位置并创建彩带
            发射点.forEach(point => {
                const container = document.getElementById(point.containerId);
                container.style.position = 'absolute';
                container.style.top = `${point.position.top}px`;
                container.style.left = `${point.position.left}px`;
                container.style.width = 'auto';
                container.style.height = 'auto';
                container.innerHTML = ''; // 清空容器
                
                // 为每个发射点创建彩带
                for (let i = 0; i < ribbonConfig.count; i++) {
                    setTimeout(() => {
                        const ribbon = document.createElement('div');
                        ribbon.classList.add('ribbon');
                        
                        // 随机属性
                        const color = ribbonConfig.colors[Math.floor(Math.random() * ribbonConfig.colors.length)];
                        const length = ribbonConfig.minLength + Math.random() * (ribbonConfig.maxLength - ribbonConfig.minLength);
                        const width = ribbonConfig.minWidth + Math.random() * (ribbonConfig.maxWidth - ribbonConfig.minWidth);
                        const delay = Math.random() * 0.8;
                        const duration = ribbonConfig.animationDuration + Math.random() * (ribbonConfig.maxAnimationDuration - ribbonConfig.animationDuration);
                        
                        // 随机选择该发射点可用的动画
                        const animation = point.animations[Math.floor(Math.random() * point.animations.length)];
                        
                        // 设置样式
                        ribbon.style.backgroundColor = color;
                        ribbon.style.height = `${length}px`;
                        ribbon.style.width = `${width}px`;
                        ribbon.style.animation = `${animation} ${duration}s ease-out ${delay}s forwards`;
                        ribbon.style.boxShadow = `0 0 8px ${color}aa`; // 添加发光效果
                        
                        container.appendChild(ribbon);
                    }, i * ribbonConfig.interval);
                }
            });
        }
        
        // 页面切换通用函数
        function navigateToPage(fromPageId, toPageId) {
            const fromPage = document.getElementById(fromPageId);
            const toPage = document.getElementById(toPageId);
            
            fromPage.classList.add('fade-out');
            setTimeout(() => {
                fromPage.classList.add('hidden');
                toPage.classList.remove('hidden', 'opacity-0');
                // 确保MathJax正确渲染数学公式
                if (window.MathJax) {
                    MathJax.typesetPromise()
                        .catch(err => console.error('MathJax渲染错误:', err));
                }
            }, 600);
        }
        
        // 显示原始答题结果
        function displayOriginalResults() {
            const resultsElement = document.getElementById('combinedAnswers');
            
            // 按题目顺序显示用户输入的原始答案
            const resultsHTML = `${userAnswers.question1 || '-'} ${userAnswers.question2 || '-'} ${userAnswers.question3 || '-'} ${userAnswers.question4 || '-'} ${userAnswers.question5 || '-'} ${userAnswers.question6 || '-'}`;
            
            resultsElement.innerHTML = resultsHTML;
            
            // 显示时间为2秒
            setTimeout(animateToBirthdayMessage, 2000);
        }
        
        // 字符动画效果 - 淡出
        function animateCharactersOut(element) {
            return new Promise((resolve) => {
                const text = element.textContent;
                element.innerHTML = '';
                
                // 将每个字符包装到span中以便动画
                for (let i = 0; i < text.length; i++) {
                    const charSpan = document.createElement('span');
                    charSpan.classList.add('char-transition');
                    charSpan.textContent = text[i];
                    charSpan.style.animationDelay = `${i * 0.05}s`;
                    element.appendChild(charSpan);
                }
                
                // 添加淡出类
                setTimeout(() => {
                    const charSpans = element.querySelectorAll('.char-transition');
                    charSpans.forEach(span => {
                        span.classList.add('char-fade-out');
                    });
                    
                    // 等待动画完成
                    setTimeout(resolve, 500);
                }, 100);
            });
        }
        
        // 字符动画效果 - 淡入
        function animateCharactersIn(element, newText) {
            return new Promise((resolve) => {
                element.innerHTML = '';
                
                // 创建新字符的span
                for (let i = 0; i < newText.length; i++) {
                    const charSpan = document.createElement('span');
                    charSpan.classList.add('char-transition', 'char-fade-in');
                    charSpan.textContent = newText[i];
                    charSpan.style.animationDelay = `${0.3 + i * 0.05}s`;
                    element.appendChild(charSpan);
                }
                
                // 等待动画完成
                setTimeout(resolve, 1000);
            });
        }
        
        // 动画过渡到生日祝福信息
        async function animateToBirthdayMessage() {
            const resultsElement = document.getElementById('combinedAnswers');
            const finalizeBtn = document.getElementById('finalizeBtn');
            
            // 获取用户答案并按顺序排列
            const happy = userAnswers.question3 || 'HAPPY';
            const b = userAnswers.question4 || 'B';
            const ir = userAnswers.question1 || 'IR';
            const th = userAnswers.question2 || 'TH';
            const day = userAnswers.question5 || 'DAY';
            const llm = userAnswers.question6 || 'LLM';
            
            // 确保HAPPY和BIRTHDAY之间有空格
            const birthdayMessage = `${happy.toUpperCase()} ${b.toUpperCase()}${ir.toUpperCase()}${th.toUpperCase()}${day.toUpperCase()} ${llm.toUpperCase()}`;
            
            // 执行动画
            await animateCharactersOut(resultsElement);
            await animateCharactersIn(resultsElement, birthdayMessage);
            
            // 添加高亮效果
            setTimeout(() => {
                const charSpans = resultsElement.querySelectorAll('.char-transition');
                charSpans.forEach(span => {
                    if (span.textContent.trim() !== '') {
                        span.classList.add('highlight');
                    }
                });
                
                // 动画完全完成后显示按钮
                setTimeout(() => {
                    finalizeBtn.classList.add('visible');
                }, 500);
            }, 500);
        }
        
        // 显示所有答案结果
        function displayAllResults() {
            // 先隐藏按钮
            document.getElementById('finalizeBtn').classList.remove('visible');
            
            // 先显示原始结果
            displayOriginalResults();
            
            // 计算得分
            let score = 0;
            Object.keys(userAnswers).forEach(key => {
                const userAnswer = userAnswers[key];
                const correctAnswer = correctAnswers[key];
                
                if (key === 'question6') {
                    if (userAnswer.toUpperCase() === correctAnswer) score++;
                } else if (key === 'question4') {
                    if (userAnswer.toUpperCase() === correctAnswer) score++;
                } else {
                    if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) score++;
                }
            });
        }
        
        // 颜色混合函数，用于创建渐变效果
        function mixColors(color1, color2, ratio) {
            return {
                r: Math.round(color1.r * (1 - ratio) + color2.r * ratio),
                g: Math.round(color1.g * (1 - ratio) + color2.g * ratio),
                b: Math.round(color1.b * (1 - ratio) + color2.b * ratio)
            };
        }
        
        // 从生日主题色集中随机选择颜色并添加变化
        function getRandomBirthdayColor(x, y, width, height) {
            // 基于位置选择基础颜色，创建渐变效果
            const colorIndex = Math.floor((x / width) * birthdayColors.length) % birthdayColors.length;
            const baseColor = birthdayColors[colorIndex];
            
            // 随机选择另一个颜色进行混合
            const randomColor = birthdayColors[Math.floor(Math.random() * birthdayColors.length)];
            
            // 基于y坐标创建垂直方向的渐变效果
            const ratio = (y / height) * config.gradientIntensity || 0.2;
            
            // 混合颜色
            const mixedColor = mixColors(baseColor, randomColor, ratio);
            
            return mixedColor;
        }
        
        // 加载指定图片
        function loadCustomImage(imageUrl) {
            // 重置状态，包括信件按钮状态
            resetAnimation();
            
            const img = new Image();
            
            // 处理跨域图片
            img.crossOrigin = 'anonymous';
            
            img.onload = function() {
                prepareDotData(img);
                startAnimation();
            };
            
            img.onerror = function(error) {
                console.error('图片加载错误:', error);
                
                // 使用备用方案
                createFallbackAnimation();
            };
            
            img.src = imageUrl;
        }
        
        // 准备圆点数据
        function prepareDotData(img) {
            try {
                // 计算缩放后的尺寸
                let width = img.width;
                let height = img.height;
                
                // 按比例缩放 - 特别针对1024x1024的正方形图片
                if (width > height) {
                    if (width > config.maxDimension) {
                        height = (height * config.maxDimension) / width;
                        width = config.maxDimension;
                    }
                } else {
                    if (height > config.maxDimension) {
                        width = (width * config.maxDimension) / height;
                        height = config.maxDimension;
                    }
                }
                
                // 设置Canvas尺寸
                const canvas = document.getElementById('dotCanvas');
                canvas.width = width;
                canvas.height = height;
                const ctx = canvas.getContext('2d');
                
                // 清空画布并设置背景
                ctx.fillStyle = '#f9f9f9';
                ctx.fillRect(0, 0, width, height);
                
                // 创建临时画布获取图像数据
                const tempCanvas = document.createElement('canvas');
                const tempCtx = tempCanvas.getContext('2d');
                tempCanvas.width = width;
                tempCanvas.height = height;
                tempCtx.drawImage(img, 0, 0, width, height);
                
                // 获取图像数据
                const imageData = tempCtx.getImageData(0, 0, width, height);
                const data = imageData.data;
                
                // 计算点间距（密度越高，间距越小）
                const step = Math.max(2, 12 - config.density);
                
                // 存储圆点数据
                dotsData = [];
                
                // 遍历图像像素，按顺序生成圆点
                for (let y = 0; y < height; y += step) {
                    for (let x = 0; x < width; x += step) {
                        const index = (y * width + x) * 4;
                        const r = data[index];
                        const g = data[index + 1];
                        const b = data[index + 2];
                        const a = data[index + 3] / 255;
                        
                        // 跳过透明区域
                        if (a < 0.1) continue;
                        
                        // 计算亮度调整大小
                        const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
                        const size = config.dotSize * (0.5 + (1 - brightness) * 0.7);
                        
                        // 按顺序计算延迟
                        const delay = (y / height) * 1000 + (x / width) * 500;
                        
                        dotsData.push({
                            x: x,
                            y: y,
                            size: size,
                            color: `rgba(${r}, ${g}, ${b}, ${a})`,
                            delay: delay
                        });
                    }
                }
                
                console.log(`生成了 ${dotsData.length} 个圆点`);
                
                if (dotsData.length === 0) {
                    throw new Error('没有从图片中提取到有效像素');
                }
                
                // 重置进度索引和彩带触发状态
                dotsIndex = 0;
                ribbonsTriggered = false;
                letterButtonShown = false; // 重置信件按钮状态
                
            } catch (error) {
                console.error('准备圆点数据时出错:', error);
                createFallbackAnimation();
            }
        }
        
        // 创建备用动画（当图片无法使用时）
        function createFallbackAnimation() {
            // 设置Canvas尺寸
            const width = config.maxDimension;  // 使用配置的最大尺寸
            const height = config.maxDimension; // 对于正方形图片
            const canvas = document.getElementById('dotCanvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            
            // 清空画布
            ctx.fillStyle = '#f9f9f9';
            ctx.fillRect(0, 0, width, height);
            
            // 生成随机圆点
            dotsData = [];
            const step = Math.max(2, 12 - config.density);
            
            for (let y = 0; y < height; y += step) {
                for (let x = 0; x < width; x += step) {
                    if (Math.random() > 0.3) {
                        const color = getRandomBirthdayColor(x, y, width, height);
                        const size = config.dotSize * (0.5 + Math.random() * 0.7);
                        const delay = (y / height) * 1000 + (x / width) * 500;
                        
                        dotsData.push({
                            x: x,
                            y: y,
                            size: size,
                            color: `rgba(${color.r}, ${color.g}, ${color.b}, 0.8)`,
                            delay: delay
                        });
                    }
                }
            }
            
            console.log(`生成了备用圆点: ${dotsData.length} 个`);
            
            // 重置进度索引和彩带触发状态
            dotsIndex = 0;
            ribbonsTriggered = false;
            letterButtonShown = false; // 重置信件按钮状态
        }
        
        // 开始动画
        function startAnimation() {
            if (dotsData.length === 0) {
                return;
            }
            
            animationActive = true;
            animationFrameId = requestAnimationFrame(animateDots);
        }
        
        // 动画绘制 - 修复了卡在最后一点的问题，调整了彩带和按钮出现时机
        function animateDots() {
            if (!animationActive) return;
            
            const totalDots = dotsData.length;
            if (dotsIndex >= totalDots) {
                animationActive = false;
                return;
            }
            
            // 计算动画进度
            const progress = dotsIndex / totalDots;
            
            // 当动画进度达到90%且按钮未显示时，显示信件按钮
            if (progress >= 0.90 && progress <= 1.0 && !letterButtonShown) {
                const letterButton = document.getElementById('letterButton');
                letterButton.classList.add('visible');
                letterButtonShown = true;
            }
            
            // 当动画进度达到95%时触发彩带效果
            if (progress >= 0.95 && progress <= 1.0 && !ribbonsTriggered) {
                createRibbons();
            }
            
            const canvas = document.getElementById('dotCanvas');
            const ctx = canvas.getContext('2d');
            
            // 每帧绘制的圆点数 - 最后一批确保绘制所有剩余圆点
            const remainingDots = totalDots - dotsIndex;
            const dotsPerFrame = remainingDots < 10 ? remainingDots : Math.max(1, Math.floor(config.speed / 20));
            
            const endIndex = Math.min(dotsIndex + dotsPerFrame, totalDots);
            
            // 绘制当前批次的圆点
            for (let i = dotsIndex; i < endIndex; i++) {
                const dot = dotsData[i];
                
                // 绘制带高光效果的圆点
                ctx.beginPath();
                ctx.arc(dot.x, dot.y, dot.size, 0, Math.PI * 2);
                
                // 创建渐变效果
                const gradient = ctx.createRadialGradient(
                    dot.x - dot.size * 0.3, 
                    dot.y - dot.size * 0.3, 
                    0,
                    dot.x, 
                    dot.y, 
                    dot.size
                );
                
                // 解析颜色
                const colorMatch = dot.color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
                if (colorMatch) {
                    const r = colorMatch[1];
                    const g = colorMatch[2];
                    const b = colorMatch[3];
                    const a = colorMatch[4];
                    
                    gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${parseFloat(a) + 0.2})`);
                    gradient.addColorStop(0.7, dot.color);
                    gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, ${parseFloat(a) * 0.5})`);
                } else {
                    gradient.addColorStop(0, dot.color);
                    gradient.addColorStop(1, dot.color);
                }
                
                ctx.fillStyle = gradient;
                ctx.fill();
            }
            
            dotsIndex = endIndex;
            
            // 即使只剩下少量圆点，也继续动画直到完成
            animationFrameId = requestAnimationFrame(animateDots);
        }
        
        // 重置动画
        function resetAnimation() {
            if (animationActive) {
                animationActive = false;
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                }
            }
            
            // 隐藏信件按钮
            const letterButton = document.getElementById('letterButton');
            letterButton.classList.remove('visible');
            
            dotsData = [];
            dotsIndex = 0;
            ribbonsTriggered = false;
            letterButtonShown = false; // 重置信件按钮状态
        }
        
        // 播放背景音乐
        function playBirthdayMusic() {
            const audio = document.getElementById('birthdayMusic');
            
            // 尝试播放音乐
            audio.play().then(() => {
                console.log('音乐播放成功');
                updateAudioButton(true);
            }).catch(error => {
                console.error('音乐播放失败:', error);
                // 如果自动播放失败，用户点击控制按钮时再尝试
                document.getElementById('audioControl').addEventListener('click', function handleClick() {
                    audio.play().then(() => {
                        console.log('用户交互后音乐播放成功');
                        updateAudioButton(true);
                    }).catch(err => console.error('用户交互后音乐仍无法播放:', err));
                    // 移除事件监听器，避免重复绑定
                    this.removeEventListener('click', handleClick);
                });
            });
        }
        
        // 更新音频控制按钮状态
        function updateAudioButton(isPlaying) {
            const audioButton = document.getElementById('audioControl');
            if (isPlaying) {
                audioButton.innerHTML = '<i class="fa fa-pause"></i>';
            } else {
                audioButton.innerHTML = '<i class="fa fa-play"></i>';
            }
        }
        
        // 切换音频播放状态
        function toggleAudioPlayback() {
            const audio = document.getElementById('birthdayMusic');
            if (audio.paused) {
                audio.play().then(() => {
                    updateAudioButton(true);
                }).catch(error => {
                    console.error('无法播放音频:', error);
                });
            } else {
                audio.pause();
                updateAudioButton(false);
            }
        }
        
        // 最终按钮功能：显示彩色圆点动画效果页面
        function finalizeDisplay() {
            // 播放生日音乐
            playBirthdayMusic();
            
            // 显示音频控制按钮
            document.getElementById('audioControls').classList.add('visible');
            
            // 隐藏所有内容区域
            const contentSections = document.querySelectorAll('.content-section');
            contentSections.forEach(section => {
                section.style.opacity = 0;
                section.style.transition = 'opacity 0.8s ease-out';
            });
            
            // 隐藏星空和银河
            const stars = document.getElementById('stars');
            const galaxy = document.querySelector('.absolute.inset-0.z-0.bg-\\[radial-gradient\\(ellipse_at_center,_var\\(--tw-gradient-stops\\)\\)');
            stars.style.opacity = 0;
            stars.style.transition = 'opacity 1s ease-out';
            if (galaxy) {
                galaxy.style.opacity = 0;
                galaxy.style.transition = 'opacity 1s ease-out';
            }
            
            // 延迟后显示圆点动画容器
            setTimeout(() => {
                // 切换到简约粉色生日背景
                document.body.classList.remove('bg-space-dark');
                document.body.classList.add('birthday-bg');
                
                // 创建简约的生日装饰
                createBirthdayDecorations();
                
                // 显示圆点动画容器
                document.getElementById('dotAnimationContainer').classList.remove('hidden');
                
                // 设置生日祝福文字
                const finalMessage = document.getElementById('finalBirthdayMessage');
                finalMessage.textContent = 'HAPPY BIRTHDAY LLM';
                finalMessage.style.opacity = 1;
                
                // 显示图片容器
                document.getElementById('birthdayImageContainer').style.opacity = 1;
                
                // 自动加载指定图片并开始圆点动画
                const imageUrl = 'https://raw.githubusercontent.com/hirutonbi113/acelpage/refs/heads/main/colored.png';
                loadCustomImage(imageUrl);
            }, 800);
        }
        
        // 信件弹窗功能
        function setupLetterModal() {
            const letterButton = document.getElementById('letterButton');
            const letterModal = document.getElementById('letterModal');
            const letterClose = document.getElementById('letterClose');
            
            // 打开信件
            letterButton.addEventListener('click', () => {
                letterModal.classList.add('active');
                // 禁用背景滚动
                document.body.style.overflow = 'hidden';
            });
            
            // 关闭信件
            letterClose.addEventListener('click', () => {
                letterModal.classList.remove('active');
                // 启用背景滚动
                document.body.style.overflow = '';
            });
            
            // 点击外部关闭
            letterModal.addEventListener('click', (e) => {
                if (e.target === letterModal) {
                    letterModal.classList.remove('active');
                    document.body.style.overflow = '';
                }
            });
        }
        
        // 验证各题答案的函数
        function checkQuestion1() {
            if (userAnswers.question1.toLowerCase() === correctAnswers.question1.toLowerCase()) {
                document.getElementById('ans1').classList.add('correct');
                document.getElementById('ans1').classList.remove('incorrect');
                
                setTimeout(() => {
                    navigateToPage('question1', 'question2');
                }, 1000);
            } else {
                document.getElementById('ans1').classList.add('incorrect');
                document.getElementById('ans1').classList.remove('correct');
                
                setTimeout(() => {
                    document.getElementById('ans1').classList.remove('incorrect');
                }, 1000);
            }
        }
        
        function checkQuestion2() {
            if (userAnswers.question2.toLowerCase() === correctAnswers.question2.toLowerCase()) {
                document.getElementById('ans2').classList.add('correct');
                document.getElementById('ans2').classList.remove('incorrect');
                
                setTimeout(() => {
                    navigateToPage('question2', 'question3');
                }, 1000);
            } else {
                document.getElementById('ans2').classList.add('incorrect');
                document.getElementById('ans2').classList.remove('correct');
                
                setTimeout(() => {
                    document.getElementById('ans2').classList.remove('incorrect');
                }, 1000);
            }
        }
        
        function checkQuestion3() {
            if (userAnswers.question3.toLowerCase() === correctAnswers.question3.toLowerCase()) {
                document.getElementById('ans3').classList.add('correct');
                document.getElementById('ans3').classList.remove('incorrect');
                
                setTimeout(() => {
                    navigateToPage('question3', 'question4');
                }, 1000);
            } else {
                document.getElementById('ans3').classList.add('incorrect');
                document.getElementById('ans3').classList.remove('correct');
                
                setTimeout(() => {
                    document.getElementById('ans3').classList.remove('incorrect');
                }, 1000);
            }
        }
        
        function checkQuestion4() {
            if (userAnswers.question4.toUpperCase() === correctAnswers.question4) {
                document.getElementById('ans4').classList.add('correct');
                document.getElementById('ans4').classList.remove('incorrect');
                
                setTimeout(() => {
                    navigateToPage('question4', 'question5');
                }, 1000);
            } else {
                document.getElementById('ans4').classList.add('incorrect');
                document.getElementById('ans4').classList.remove('correct');
                
                setTimeout(() => {
                    document.getElementById('ans4').classList.remove('incorrect');
                }, 1000);
            }
        }
        
        function checkQuestion5() {
            if (userAnswers.question5.toLowerCase() === correctAnswers.question5.toLowerCase()) {
                document.getElementById('ans5').classList.add('correct');
                document.getElementById('ans5').classList.remove('incorrect');
                
                setTimeout(() => {
                    navigateToPage('question5', 'question6');
                }, 1000);
            } else {
                document.getElementById('ans5').classList.add('incorrect');
                document.getElementById('ans5').classList.remove('correct');
                
                setTimeout(() => {
                    document.getElementById('ans5').classList.remove('incorrect');
                }, 1000);
            }
        }
        
        function checkQuestion6() {
            if (userAnswers.question6.toUpperCase() === correctAnswers.question6) {
                document.getElementById('ans6').classList.add('correct');
                document.getElementById('ans6').classList.remove('incorrect');
                
                setTimeout(() => {
                    displayAllResults();
                    navigateToPage('question6', 'result');
                }, 1000);
            } else {
                document.getElementById('ans6').classList.add('incorrect');
                document.getElementById('ans6').classList.remove('correct');
                
                setTimeout(() => {
                    document.getElementById('ans6').classList.remove('incorrect');
                }, 1000);
            }
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            // 初始化加载动画
            setTimeout(() => {
                const loadingScreen = document.getElementById('loadingScreen');
                loadingScreen.style.opacity = 0;
                
                setTimeout(() => {
                    loadingScreen.style.display = 'none';
                    createStars();
                    
                    // 页面加载完成后初始化MathJax
                    if (window.MathJax) {
                        MathJax.typesetPromise()
                            .catch(err => console.error('MathJax初始化错误:', err));
                    }
                }, 500);
            }, 500);
            
            // 初始化日期时间显示
            updateDateTime();
            setInterval(updateDateTime, 1000);
            
            // 初始化信件弹窗功能
            setupLetterModal();
            
            // 绑定音频控制按钮
            document.getElementById('audioControl').addEventListener('click', toggleAudioPlayback);
            
            // 绑定初始页按钮事件 - 导航到说明页
            document.getElementById('nextPageBtn').addEventListener('click', () => {
                navigateToPage('initialContent', 'introPage');
            });
            
            // 绑定说明页按钮事件 - 导航到第一题
            document.getElementById('startQuizBtn').addEventListener('click', () => {
                navigateToPage('introPage', 'question1');
            });
            
            // 绑定最终页按钮事件
            document.getElementById('finalizeBtn').addEventListener('click', finalizeDisplay);
            
            // 各题输入事件绑定
            document.getElementById('ans1').addEventListener('input', function() {
                userAnswers.question1 = this.value.trim();
            });
            document.getElementById('ans1').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') checkQuestion1();
            });
            document.getElementById('sub1').addEventListener('click', checkQuestion1);
            
            document.getElementById('ans2').addEventListener('input', function() {
                userAnswers.question2 = this.value.trim();
            });
            document.getElementById('ans2').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') checkQuestion2();
            });
            document.getElementById('sub2').addEventListener('click', checkQuestion2);
            
            document.getElementById('ans3').addEventListener('input', function() {
                userAnswers.question3 = this.value.trim();
            });
            document.getElementById('ans3').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') checkQuestion3();
            });
            document.getElementById('sub3').addEventListener('click', checkQuestion3);
            
            document.getElementById('ans4').addEventListener('input', function() {
                userAnswers.question4 = this.value.trim();
            });
            document.getElementById('ans4').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') checkQuestion4();
            });
            document.getElementById('sub4').addEventListener('click', checkQuestion4);
            
            document.getElementById('ans5').addEventListener('input', function() {
                userAnswers.question5 = this.value.trim();
            });
            document.getElementById('ans5').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') checkQuestion5();
            });
            document.getElementById('sub5').addEventListener('click', checkQuestion5);
            
            document.getElementById('ans6').addEventListener('input', function() {
                userAnswers.question6 = this.value.trim();
            });
            document.getElementById('ans6').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') checkQuestion6();
            });
            document.getElementById('sub6').addEventListener('click', checkQuestion6);
        });
        
        // 窗口大小变化时重绘星空
        window.addEventListener('resize', function() {
            clearTimeout(this.resizeTimer);
            this.resizeTimer = setTimeout(() => {
                const starsContainer = document.getElementById('stars');
                starsContainer.innerHTML = '';
                createStars();
            }, 300);
        });
    </script>
</body>
</html>
    
